<template>
    <div class="IntelligentScreening">
        <el-row>
            <el-col :span="9">
                <el-card style="margin:5px 0;height: 420px">
                    <h4 slot="header">初定名单</h4>
                    <div class="IntelligentScreeningContentLeftTop">
                        <div class="IntelligentScreeningContentLeftTop_left">
                            <div class="level-item">五级村书记</div>
                            <div class="level-item">四级村书记</div>
                            <div class="level-item">三级村书记</div>
                            <div class="level-item">二级村书记</div>
                            <div class="level-item">一级村书记</div>
                        </div>
                        <div class="IntelligentScreeningContentLeftTop_right">
                            <div class="IntelligentScreeningContentLeftTop_right_content">
                                <div v-for="(item,index) in classObj.level5" class="intel_name" :class="ind==index&&indLevel=='level5'? {intel_name_active:true}:{intel_name:true}" @click="changeActiveVillage(item,index,'level5')">
                                    <p>{{item.villageName}}</p>
                                    <p class="intel_name_p">{{item.cadresName}}</p>
                                </div>
                            </div>
                            <div class="IntelligentScreeningContentLeftTop_right_content">
                                <div v-for="(item,index) in classObj.level4" class="intel_name" :class="ind==index&&indLevel=='level4'? {intel_name_active:true}:{intel_name:true}" @click="changeActiveVillage(item,index,'level4')">
                                    <p>{{item.villageName}}</p>
                                    <p class="intel_name_p">{{item.cadresName}}</p>
                                </div>
                            </div>
                            <div class="IntelligentScreeningContentLeftTop_right_content">
                                <div v-for="(item,index) in classObj.level3" class="intel_name" :class="ind==index&&indLevel=='level3'? {intel_name_active:true}:{intel_name:true}" @click="changeActiveVillage(item,index,'level3')">
                                    <p>{{item.villageName}}</p>
                                    <p class="intel_name_p">{{item.cadresName}}</p>
                                </div>
                            </div>
                            <div class="IntelligentScreeningContentLeftTop_right_content">
                                <div v-for="(item,index) in classObj.level2" class="intel_name" :class="ind==index&&indLevel=='level2'? {intel_name_active:true}:{intel_name:true}" @click="changeActiveVillage(item,index,'level2')">
                                    <p>{{item.villageName}}</p>
                                    <p class="intel_name_p">{{item.cadresName}}</p>
                                </div>
                            </div>
                            <div class="IntelligentScreeningContentLeftTop_right_content">
                                <div v-for="(item,index) in classObj.level1" class="intel_name" :class="ind==index&&indLevel=='level1'? {intel_name_active:true}:{intel_name:true}" @click="changeActiveVillage(item,index,'level1')">
                                    <p>{{item.villageName}}</p>
                                    <p class="intel_name_p">{{item.cadresName}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card  style="margin: 5px 0;height: 360px">
                    <h4 slot="header">破格情形</h4>
                    <div class="IntelligentScreeningContentCenterBreakRules">
                        <div class="IntelligentScreeningContentCenterBreakRules_break_title_seach">
                            <el-row style="margin-top: 5px">
                                <el-col :span="4" style="text-align: left">
                                    <span class="IntelligentScreeningContentCenterBreakRules_title">查询：</span>
                                </el-col>
                                <el-col :span="10" style="text-align: left">
                                    <el-select
                                        v-model="state"
                                        filterable
                                        remote
                                        reserve-keyword
                                        placeholder="请输入村书记姓名"
                                        :remote-method="remoteMethod"
                                        @change="selectPersonChange"
                                        :loading="loading">
                                        <el-option
                                            v-for="item in options"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top: 20px;text-align: left;">
                                <el-col :span="4" >
                                    <span class="IntelligentScreeningContentCenterBreakRules_title">当前职级：</span>
                                </el-col>
                                <el-col :span="13" class="IntelligentScreeningContentCenterBreakRules_title" >
                                    {{currentSelectPerson.quasiAssessmentRank||'暂无'}}
                                </el-col>
                            </el-row>
                            <el-row style="margin-top: 20px">
                                <el-col :span="4" style="text-align: left">
                                    <span class="IntelligentScreeningContentCenterBreakRules_title">目的职级：</span>
                                </el-col>
                                <el-col :span="13" style="text-align: left">
                                    <el-select v-model="purposeRankLevel" placeholder="请选择目的职级">
                                        <el-option
                                            v-for="item in purposeRankList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top: 20px">
                                <el-col :span="4" style="text-align: left">
                                    <span class="IntelligentScreeningContentCenterBreakRules_title">理由：</span>
                                </el-col>
                                <el-col :span="13">
                                    <el-input v-model="reason" type="textarea" :rows="2"></el-input>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top: 20px">
                                <el-col :span="13" :offset="4" style="text-align: left">
                                    <button class="IntelligentScreeningContentCenterDetail_save" @click="addBreak()">确定</button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="9">
                <el-card  style="margin: 5px;height: 785px">
                    <h4 slot="header">个人信息</h4>
                    <div class="IntelligentScreeningContentCenterDetail">
                        <div class="IntelligentScreeningContentCenterDetail_bg">
                            <div style="display: flex">
                                <div style="flex: 0 0 120px">
                                    <div class="IntelligentScreeningContentCenterDetail_header" v-if="ind<0">
                                        <p style="text-align: center;margin-top: 60px"> 暂无头像</p>
                                    </div>
                                    <el-image :src="currentVillage.headSculpture" class="IntelligentScreeningContentCenterDetail_header" v-else>
                                        <div slot="error" style="text-align: center;margin-top: 60px">
                                            暂无头像
                                        </div>
                                    </el-image>
                                </div>
                                <div style="flex: 1">
                                    <el-row>
                                        <el-col :span="6">
                                            <p class="IntelligentScreeningContentCenterDetail_name" v-if="ind<0">{{'暂无'}}</p>
                                            <p class="IntelligentScreeningContentCenterDetail_name" v-else>{{currentVillage.cadresName||'暂无'}}</p>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-rate disabled v-model="currentLevel" :colors="colors"></el-rate>
                                        </el-col>
                                    </el-row>
                                    <el-row style="margin: 20px 0">
                                        <el-col :span="6">
                                            <p style="font-size: 14px;">目的职级</p>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-rate disabled v-model="currentLevel2" :colors="colors"></el-rate>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="8"  style="text-align: left;margin-top: 12px">
                                            <span class="IntelligentScreeningContentCenterDetail_job" v-if="ind<0">{{'暂无'}}</span>
                                            <span class="IntelligentScreeningContentCenterDetail_job" v-else>{{currentVillage.villageName?currentVillage.villageName.replace(/支部|党总支/,'')+`村书记`:'暂无'}}</span>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                            <div class="IntelligentScreeningContentCenterDetail_bottom">
                                <el-row>
                                    <el-col :span="12" >
                                        <span>
                                            <el-image src="../../static/img/csj/icon/icard.png" class="IntelligentScreeningContentCenterDetail_img"></el-image>
                                        </span>
                                        <span class="IntelligentScreeningContentCenterDetail_detail_word">身份证号：</span>
                                        <span class="IntelligentScreeningContentCenterDetail_job" v-if="ind<0">{{'暂无'}}</span>
                                        <span class="IntelligentScreeningContentCenterDetail_job" v-else>{{currentVillage.identityCard||'暂无'}}</span>
                                    </el-col>
                                    <el-col :span="12" >
                                        <span>
                                            <el-image src="static/img/csj/icon/apply.png" class="IntelligentScreeningContentCenterDetail_img"></el-image>
                                        </span>
                                        <span class="IntelligentScreeningContentCenterDetail_detail_word">入党时间：</span>
                                        <span class="IntelligentScreeningContentCenterDetail_phone" v-if="ind<0">{{'暂无'}}</span>
                                        <span class="IntelligentScreeningContentCenterDetail_phone" v-else>{{currentVillage.partyTime||'暂无'}}</span>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12" style="margin-top: 15px">
                                        <span>
                                           <el-image src="static/img/csj/icon/education.png" class="IntelligentScreeningContentCenterDetail_img"></el-image>
                                        </span>
                                        <span class="IntelligentScreeningContentCenterDetail_detail_word">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：</span>
                                        <span class="IntelligentScreeningContentCenterDetail_job" v-if="ind<0">{{'暂无'}}</span>
                                        <span class="IntelligentScreeningContentCenterDetail_job" v-else>{{currentVillage.education||'暂无'}}</span>
                                    </el-col>
                                    <el-col :span="12"  style="margin-top: 15px">
                                        <span>
                                            <el-image src="static/img/csj/icon/bear.png" class="IntelligentScreeningContentCenterDetail_img"></el-image>
                                        </span>
                                        <span class="IntelligentScreeningContentCenterDetail_detail_word">任职时间：</span>
                                        <span class="IntelligentScreeningContentCenterDetail_phone" v-if="ind<0">{{'暂无'}}</span>
                                        <span class="IntelligentScreeningContentCenterDetail_phone" v-else>{{currentVillage.workTime||'暂无'}}</span>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12"   style="text-align: left;margin-top: 15px">
                                        <span>
                                            <el-image src="static/img/csj/icon/check.png" class="IntelligentScreeningContentCenterDetail_img"></el-image>
                                        </span>
                                        <span class="IntelligentScreeningContentCenterDetail_detail_word">考核情况：</span>
                                        <span class="IntelligentScreeningContentCenterDetail_job" v-if="ind<0">{{'暂无'}}</span>
                                        <span class="IntelligentScreeningContentCenterDetail_job" v-else>{{currentVillage.villageName||'暂无'}}</span>
                                    </el-col>
                                    <el-col :span="12"  style="text-align: left;margin-top: 15px">
                                        <span>
                                            <el-image src="static/img/csj/icon/ability.png" class="IntelligentScreeningContentCenterDetail_img"></el-image>
                                        </span>
                                        <span class="IntelligentScreeningContentCenterDetail_detail_word">能力判研：</span>
                                        <span class="IntelligentScreeningContentCenterDetail_phone" v-if="ind<0">{{'暂无'}}</span>
                                        <span class="IntelligentScreeningContentCenterDetail_phone" v-else>{{currentVillage.abilityJudgement||'暂无'}}</span>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <div style="text-align: left;margin-top: 15px;display: flex">
                                        <div style="flex: 0 0 24px">
                                            <el-image src="static/img/csj/icon/job.png" class="IntelligentScreeningContentCenterDetail_img"></el-image>
                                        </div>
                                        <div style="flex: 1;margin-top: 5px">
                                            <span class="IntelligentScreeningContentCenterDetail_detail_word">工作简历：</span>
                                            <span class="IntelligentScreeningContentCenterDetail_job" v-if="ind<0">{{'暂无'}}</span>
                                            <span class="IntelligentScreeningContentCenterDetail_job" v-else>{{currentVillage.workExperience||'暂无'}}</span>
                                        </div>
                                    </div>
                                </el-row>
                            </div>
                            <div class="IntelligentScreeningContentCenterDetail_btn" v-if="ind>-1">
                                <el-divider></el-divider>
                                <div style="padding: 0 24px">
                                    <button class="IntelligentScreeningContentCenterDetail_save" @click="save()">确定</button>
                                    <button class="IntelligentScreeningContentCenterDetail_cancel" @click="cancel()">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card  style="margin: 5px;height: 785px">
                    <h4  slot="header">待发布村书记名单</h4>
                    <div class="IntelligentScreeningContentright">
                        <div v-show="waitReleaseList.length === 0">
                            <div class="noReleasePersonImg"></div>
                        </div>
                        <div class="item_box">
                          <div class="IntelligentScreeningContentright_bg" v-for="(item,index) in waitReleaseList">
                            <el-row>
                                <el-col :span="10">
                                    <span>{{item.villageName}}</span>
                                </el-col>
                                <el-col :span="6">
                                    <span>{{item.cadresName}}</span>
                                </el-col>
                                <el-col :span="4">
                                    <i class="el-icon-delete" @click="delReleasePerson(index,item)" style="color: #f56c6c;font-size: 18px;font-weight: bold"></i>
                                </el-col>
                                <el-col :span="4" style="text-align: right">
                                    <el-image :src="item.leaveImg" class="IntelligentScreeningContentright_img"></el-image>
                                </el-col>
                            </el-row>
                        </div>
                        </div>
                        <div v-if="waitReleaseList.length>0" style="margin-top: 30px;clear: both;text-align: center;font-size: 14px">
                            <span>截止日期：</span>
                            <el-date-picker v-model="endDay" type="date" value-format="yyyy-MM-dd" placeholder="选择截止日期"></el-date-picker>
                            <div style="display: flex;margin-top: 10px">
                                <button class="IntelligentScreeningContentCenterDetail_release" @click="Release()">发布</button>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div class="IntelligentScreeningContentLeftBottom" style="clear: both;">
            <div class="IntelligentScreeningContentLeftBottom_list">
                <div>书记名</div>
                <div>所属村</div>
                <div>现任级别</div>
                <div>任职年限(年)</div>
                <div>能力研判</div>
                <div style="flex: 2">上年度专职村书记考核等次</div>
            </div>
            <div @click="clickReason(item,index)" v-for="(item,index) in personnelScreeningList"  class="IntelligentScreeningContentLeftBottom_list_row">
                <div>{{item.cadresName}}</div>
                <div>{{item.villageName}}</div>
                <div>{{item.currentLevel}}</div>
                <div>{{item.workDuration}}</div>
                <div>{{AbilityJudge||'暂无'}}</div>
                <div style="flex: 2">{{AssessmentLeave||'暂无'}}</div>
            </div>
            <div style="clear: both;text-align: right;margin-top: 20px">
                <el-pagination
                    layout="prev, pager, next"
                    :pageSize="page.pageSize"
                    :total="page.total"
                    @current-change="getVillageSecretaryList">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import LookUp from  '@/lookup';
    export default {
        name: "IntelligentScreening",
        data(){
            return {
                activeBg:'',
                ind : -1,
                indRy : -1,
                villageSecretaryListFirth :[],
                villageSecretaryListFourth :[],
                villageSecretaryListThird :[],
                villageSecretaryListSecond :[],
                villageSecretaryList : [],
                currentVillage : {},
                page : {
                    total : 0,
                    pageSize: 6,
                    pageNumber: 0
                },
                abaility:'',
                lastLeave:'',
                waitReleaseList:[],
                promotionCadres:[],
                options: [],
                queryWord: '',
                timeout:  null,
                hasCheckTask : false,
                loading: false,
                endDay : '',
                state: '',
                reason: '',
                sexOptions:LookUp["Sex"],
                personnelScreeningList : [],
                screenList:[
                    {condition:'筛选条件一'},
                    {condition:'筛选条件二'},
                    {condition:'筛选条件三'}
                ],
                currentLevel : 0,
                currentLevel2 : 0,
                currentLevelObj : [
                    {name:'一级专职村书记'},
                    {name:'二级专职村书记'},
                    {name:'三级专职村书记'},
                    {name:'四级专职村书记'},
                    {name:'五级专职村书记'},
                ],
                colors: ['#FF9900','#FF9900','#FF9900','#FF9900','#FF9900'],
                Ability : LookUp["AbilityJudgement"],
                Leave : LookUp["CheckGrade"],
                AbilityJudge : '',
                AssessmentLeave:'',
                purposeLeve : [
                    {name:'一级专职村书记',image:'../../static/img/csj/yiji.png'},
                    {name:'二级专职村书记',image:'../../static/img/csj/erji.png'},
                    {name:'三级专职村书记',image:'../../static/img/csj/sanji.png'},
                    {name:'四级专职村书记',image:'../../static/img/csj/siji.png'},
                    {name:'五级专职村书记',image:'../../static/img/csj/wuji.png'},
                ],
                leaveImg:'',
                classObj : {},
                classA:[],
                classB:[],
                classC:[],
                classD:[],
                classE:[],
                indLevel:'',
                currentSelectPerson:{},
                purposeRankList:[
                    {id:'一级专职村书记',name:'一级专职村书记'},
                    {id:'二级专职村书记',name:'二级专职村书记'},
                    {id:'三级专职村书记',name:'三级专职村书记'},
                    {id:'四级专职村书记',name:'四级专职村书记'},
                    {id:'五级专职村书记',name:'五级专职村书记'},
                ],
                purposeRankLevel:''
            }
        },
        methods :{
            clickReason(item,index){
                this.indRy = index;
                this.activeBg='background:rgba(51,178,124,1);color: #fff;!important';
                this.$http('get',`identity/villageCadres/${item.cadresId}id`,false).then(data => {
                    this.screenList = Object.assign(item);
                    this.screenList.headSculpture = data.headSculpture;
                    this.screenList.identityCard = data.identityCard;
                    this.screenList.partyTime = data.partyTime;
                    this.screenList.workExperience = data.workExperience;
                    this.screenList.workTime = data.workTime;

                });
            },
            hasTask(){
                this.$http("POST", '/identity/cadreTask/getCurrentTask/职级评定', {}, false).then(
                    data => {
                        if (data) {
                            this.hasCheckTask = false;
                        }
                    }
                );
            },
            getVillageSecretaryList(val){
                if (val) {
                    this.page.pageNumber ++;
                }
                this.$http(`get`,`/identity/ratingStandard/getAllGroupByLevel`,false).then(data=>{
                    this.classObj = data;
                    console.log("getVillageSecretaryList -> this.classObj", this.classObj)
                    this.classA = data.level1;
                    this.classB = data.level2;
                    this.classC = data.level3;
                    this.classD = data.level4;
                    this.classE = data.level5;

                });
                this.$http(`post`,`/identity/ratingStandard/page?page=${this.page.pageNumber}&size=${this.page.pageSize}`,{promotable: "1",enable: "1"},false).then(data=>{
                        this.villageSecretaryList = data.content;
                        this.personnelScreeningList = data.content;
                        this.Ability.forEach(item=>{
                            if(item.value==this.personnelScreeningList.abilityJudgement){
                                this.AbilityJudge = item.label;
                            }
                        });
                    this.Leave.forEach(item=>{
                        if(item.value==this.personnelScreeningList. lastGrade){
                            this.AssessmentLeave = item.label;
                        }
                    });
                    this.page.total = data.totalElements;
                    }
                )
            },

            changeActiveVillage(item,index,type){
                this.ind = index;
                this.indLevel = type;
                this.$http('get',`identity/villageCadres/${item.cadresId}id`,false).then(data => {
                    this.currentVillage = Object.assign(item);
                    this.currentVillage.headSculpture = data.headSculpture;
                    this.currentVillage.identityCard = data.identityCard;
                    this.currentVillage.partyTime = data.partyTime;
                    this.currentVillage.workExperience = data.workExperience;
                    this.currentVillage.workTime = data.workTime;
                    this.currentVillage.purpose = item.name;
                    this.currentVillage.type = type;
                    this.currentLevelObj.forEach((item,index)=>{
                        if(item.name===this.currentVillage.currentLevel){
                            this.currentLevel =  index+1;
                        }
                        if(item.name === this.currentVillage.name){
                            this.currentLevel2 =  index+1;
                        }
                    });
                });
                let abilityJudgement = '1';

                if(this.currentVillage.abilityJudgement == '1'){
                    this.abaility = '合格'
                }
                if(this.currentVillage.lastGrade == '2'){
                    this.lastLeave = '称职'
                }
                this.Ability.forEach((item,index)=>{
                    if(item.value===this.currentVillage.abilityJudgement){
                        this.AbilityJudge = item.label;
                    }
                });


            },
            cancel(){
                this.ind = -1;
                this.currentLevel = 0;
                this.currentLevel2 = 0;
            },
            save(){
                this.currentLevel = 0;
                this.currentLevel2 = 0;
                this.purposeLeve.forEach(e=>{
                    if(e.name == this.currentVillage.name){
                        this.leaveImg = e.image;
                        this.currentVillage.leaveImg = e.image;
                    }
                });
                //在此判断等待发布列表中是否存在，如果存在给个状态1，不存在给个状态0
                this.currentVillage.hasWait = 0;
                //初定名单村书记主键是cadresId,定义一个统一存放id的属性
                this.currentVillage.sameId = this.currentVillage.cadresId;
                this.waitReleaseList.forEach((item,index)=>{
                    if(item.sameId === this.currentVillage.cadresId){
                        this.currentVillage.hasWait = 1;
                    }
                });
                this.waitReleaseList.push(this.currentVillage);
                console.log(this.waitReleaseList,'等待发布的列表')
                this.classObj[this.currentVillage.type].splice(this.ind,1);
                this.ind = -1;
            },
            addBreak(){
                let ts = this.options.filter(item => item.id === this.state);
                if (ts.length === 0) {
                    this.$message({
                        type: "warning",
                        message: '暂无选中需要破格提升的村书记！'
                    });
                    return;
                }
                let tempObj = {};
                Object.assign(tempObj, ts[0]);
                this.purposeLeve.forEach(item =>{
                    if(item.name == this.purposeRankLevel){
                        this.leaveImg = item.image;
                         tempObj.leaveImg = item.image;
                    }
                });
                tempObj.isBreakRule = "1";
                tempObj.reason = this.reason;
                tempObj.villageName = tempObj.districtName;
                tempObj.cadresName = tempObj.name;
                tempObj.hasWait = 0;
                //初定名单村书记主键是id,定义一个统一存放id的属性
                tempObj.sameId = tempObj.id;
                this.waitReleaseList.forEach((item,index)=>{
                    if(item.sameId === tempObj.id){
                        tempObj.hasWait = 1;
                    }
                });
                this.waitReleaseList.push(tempObj);
                this.$message({
                    type: "success",
                    message: '添加成功！'
                });
                this.state = '';
                this.reason = '';
                this.purposeRankLevel = '';
                this.currentSelectPerson = {};
            },
            Release(){
                if(this.endDay == ''){
                    this.$message({
                        type:"warning",
                        message:'发布时间必填!'
                    })
                }else {
                    let fbobj = {};
                    this.promotionCadres = [];
                    fbobj.name = '发布';
                    fbobj.type = '职级评定';
                    fbobj.endTime = this.endDay;
                    this.waitReleaseList.forEach(e=> {
                        let zp = {};
                        zp.cadresName = e.cadresName;
                        zp.postName = e.villageName + '书记';
                        zp.purposeLevelName = e.name;
                        zp.cadresId = e.cadresId;
                        zp.villageId = e.districtId;
                        zp.townId = e.districtId.slice(0,4);
                        zp.isBreakRule = 'false';
                        this.promotionCadres.push(zp);
                    });
                    fbobj.promotionCadres = this.promotionCadres;
                    if(this.hasCheckTask){
                        this.$message({
                            type : success,
                            message : '当前已有任务!'
                        })
                    }else {
                        this.$http(`post`,`/identity/cadreTask/publishJudgeTask`,fbobj,false).then(data=>{
                                this.$message({
                                    type: "success",
                                    message : '发布成功!'
                                })
                            }
                        )
                    }
                }
            },
            remoteMethod(query) {
                this.$http(`post`,`/identity/villageCadres/list`,{name:query,hasRetire: "0",cadresType: "SECRETARY"},false).then(data=>{
                    this.options = data;
                });
            },
            selectPersonChange(val){
                this.currentSelectPerson = this.options.filter(item => item.id === this.state)[0];
            },
            delReleasePerson(index,item){
                this.currentLevel = 0;
                this.currentLevel2 = 0;
                this.waitReleaseList.splice(index,1);
                if(item.type){
                    this.classObj[item.type].push(item);
                }
            }
        },
        mounted() {
            this.getVillageSecretaryList();
            this.hasTask()
        }
    }
</script>

<style scoped>
    .IntelligentScreening{
        padding: 0 10px;
    }
    .IntelligentScreening h4 {
        text-align: left;
        color: #55BD94;
    }
    .IntelligentScreeningContentright {
       /* width: 330px;
        height: 600px;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 5px 0px rgba(74,155,84,0.2);
        display: inline-block;*/
        vertical-align: top;
    }
    .IntelligentScreeningContent .IntelligentScreeningContentLeft {
        text-align: left;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 5px 0px rgba(74,155,84,0.2);
        border-radius:5px;
        position: relative;
        float: left;
        width: 670px;
        height: 600px;
        overflow: scroll;
    }
    .punblicDiv {
        width:3px;
        height:15px;
        background:rgba(51,178,124,1);
        float: left;
    }
    .IntelligentScreeningContent .IntelligentScreeningContentCenter {
        display: inline-block;
    }
    .IntelligentScreeningContent .IntelligentScreeningContentright {
        flex: 1;
        background:rgba(255,255,255,1);
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 5px 0px rgba(74,155,84,0.2);
        border-radius:5px;
        position: relative;
        display: flex;
        /*margin-left: 30px;*/
    }
    .IntelligentScreeningContent h4 {
        text-align: left;
        margin: 15px;
        color: #4B5262;
    }
    .IntelligentScreeningContentright h4 {
        text-align: left;
        color: #4B5262;
    }
    .IntelligentScreeningContentLeftTop {
        display: flex;
        text-align: left;
        margin-top: 4px;
    }
    .IntelligentScreeningContentLeftTop_left {
        flex: 0 0 120px;
    }
    .IntelligentScreeningContentLeftTop_left div{
        text-align: right!important;
        border-right:1px dashed #DFDFDF ;
        border-bottom:1px dashed #DFDFDF;
        height: 70px;
        line-height: 70px;
        padding-right: 10px;
    }
    .IntelligentScreeningContentLeftTop_right {
        flex: 6;
      /*  margin-right: 6px;*/
        text-align: left;
        height:350px;
      /*  border:1px solid rgba(72, 231, 108, 0.2);
        box-shadow:0px 2px 5px 0px rgba(74,155,84,0.2);*/
      /*  border-radius:5px;*/
        position: relative;
        /*background: rgba(245,250,247,1);*/
    }
    .IntelligentScreeningContentLeftTop_right_content {
        display: flex;
        white-space: nowrap;
        width: 500px;
        height:70px;
        border-bottom:1px dashed #DFDFDF;
        overflow: auto;
    }
    .intel_name {
        font-size: 12px;
        min-width:100px;
        height:50px;
        border-radius:4px;
        text-align: center;
        padding: 6px 0;
        border: 1px #DFDFDF solid;
        color:#7E7E7E;
        background: #F2F2F2;
        cursor: pointer;
        float: left;
        margin: auto 5px;
    }

    .intel_name_active {
        font-size: 12px;
        width:100px;
        height:50px;
        border-radius:4px;
        text-align: center;
        padding: 6px 0;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color:#fff;
        background-image: url("../../static/img/csj/intel_name_active.png");
        cursor: pointer;
        border: none;
    }
    .intel_name_p {
        padding-top: 5px;
    }
    .IntelligentScreeningContentLeftBottom {
        text-align: left;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 5px 0px rgba(74,155,84,0.2);
        border-radius:5px;
        position: relative;
        margin: 15px auto;
        min-height: 300px;
    }
    .IntelligentScreeningContentLeftBottom_title {
        float: left;
        margin-left: 15px;
        font-size: 16px;
        font-weight:400;
        color:rgba(34,34,34,1);
    }
    .IntelligentScreeningContentLeftBottom_cadition {
        float: left;
        margin-left: 15px;
        color: #7F838E;
        cursor: pointer;
    }
    .IntelligentScreeningContentLeftBottom_cadition_active{
        color: #33B27C;
    }
    .IntelligentScreeningContentLeftBottom_list {
        display: flex;
        font-size: 16px;
        clear: both;
        color:#FFFFFF;
        height:50px;
        line-height: 50px;
        background:linear-gradient(90deg,rgba(100,169,179,1),rgba(69,160,78,1));
        border-radius:4px 4px 0px 0px;
        border-radius:2px;
    }
    .IntelligentScreeningContentLeftBottom_list  div{
        flex: 1;
        text-align: left;
        height: 50px;
        line-height: 50px;
        padding: 0 0 0 50px;
    }
    .IntelligentScreeningContentLeftBottom_list_row {
        display: flex;
        cursor: pointer;
        height: 50px;
        line-height: 50px;
        color: #7E7E7E;
        border-bottom: 1px solid #DFDFDF;
        font-size: 14px;
    }
    .IntelligentScreeningContentLeftBottom_list_row:hover {
       /* background:rgba(51,178,124,1);
        color: #fff;*/
    }
    .IntelligentScreeningContentLeftBottom_list_row  div{
        flex: 1;
        text-align: left;
        padding: 0 0 0 50px;
    }
    .IntelligentScreeningContentCenterBreakRules_title {
        height:14px;
        font-size:14px;
        font-weight:400;
        color:rgba(153,153,153,1);
    }
    .IntelligentScreeningContentCenterBreakRules_break_title_seach {
        position: relative;
      /*  margin-left: 20px;*/
    }
    .IntelligentScreeningContentCenterDetail_cancel:hover {
        box-shadow: 0px 2px 12px 0px #8cf5ff;
        transform: scale(1.01);
    }
    .IntelligentScreeningContentCenterDetail_phone {
        width:88px;
        height:11px;
        font-size:14px;
        font-weight:400;
        color:#393939;
    }
    .IntelligentScreeningContentCenterDetail_save {
        width:100px;
        height:32px;
        background:#55BD94;
        border-radius:5px;
        font-size:14px;
        font-weight:400;
        color:rgba(255,255,255,1);
        border: 0;
        outline: 0;
        cursor: pointer;
        transition: all .3s;
        display: inline-block;
    }
    .IntelligentScreeningContentCenterDetail_save:hover {
        box-shadow: 0px 2px 12px 0px green;
        transform: scale(1.01);
    }
    .IntelligentScreeningContentCenterDetail_content {
        position: relative;
    }
    .IntelligentScreeningContent .IntelligentScreeningContentLeft div {
       /*padding-left: 20px;*/
       /* padding-right: 10px;*/
       /* color: #484848;*/
        font-size: 14px;
        /*text-align: left;*/
    }

    .IntelligentScreeningContentCenterDetail{
       /* background:rgba(255,255,255,1);
        border:1px solid rgba(72, 231, 108, 0.2);
        box-shadow:0px 2px 5px 0px rgba(74,155,84,0.2);
        border-radius:5px;*/
        position: relative;
        margin-top: 4px;
       /* margin-right: 6px;
        margin-left: 6px;*/
        overflow-y: scroll;
        overflow-x: hidden;
        text-align: left;
    }
    .IntelligentScreeningContentCenterDetail_bg {
       /* background:rgba(245,250,247,1);
        box-shadow:0px 0px 7px 0px rgba(0, 0, 0, 0.1);
        border-radius:5px;*/
        margin: 20px;
    }
    .IntelligentScreeningContentCenterDetail_header {
        width: 100px;
        height: 150px;
        border-radius: 4px;
        background: #f5f7fa;
        color: #3A3A3A;
        font-size: 14px;
        border: 1px solid #ccc;
    }
    .IntelligentScreeningContentCenterDetail_reasonl {
        font-size: 16px;
    }
    .IntelligentScreeningContentCenterDetail_reasonl_detail {
        font-size: 12px;
        text-indent: 2em;
    }
    .IntelligentScreeningContentCenterDetail_name {
        width:75px;
        font-size:20px;
        font-weight:700;
        color:rgba(75,82,98,1);
        text-align: left;
    }
    .IntelligentScreeningContentCenterDetail_img {
        width: 20px;
        height: 20px;
        position: relative;
        top: 6px;
    }
    .IntelligentScreeningContentCenterDetail_detail_word {
        font-size: 14px;
        color: #AAAAAA;
    }
    .IntelligentScreeningContentCenterDetail_job {
        font-size:14px;
        font-weight:400;
        color:#393939;
        line-height: 26px;
    }
    .IntelligentScreeningContentCenterDetail_cancel {
        width:100px;
        height:32px;
        background:#E6A23C;
        border-radius:5px;
        border: 0;
        outline: 0;
        font-size:14px;
        color:white;
        transition: all .3s;
        cursor: pointer;
        display: inline-block;
        margin: 0 20px;
    }

    .IntelligentScreeningContentCenterDetail_RankEvaluation {
        width:530px;
        height:30px;
        font-size:16px;
        font-weight:500;
        color:rgba(75,82,98,1);
        position: relative;
        text-align: left;
        margin: 12px 0;
        border-bottom: 2px solid rgb(238,248,248);
    }
    .IntelligentScreeningContentCenterDetail_bottom {
        min-height: 170px;
        overflow-x: hidden;
        overflow-y: scroll;
        background:rgba(255,255,255,1);
        border-radius:4px;
        text-align: left;
        padding: 8px;
        margin: 20px 0;
    }
    .IntelligentScreeningContentCenterDetail_btn {
        margin-top: 10px;
    }
    .IntelligentScreeningContentright_bg {
        flex: 1;
        height:45px;
        line-height: 45px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(231, 231, 231, 0.91);
        box-shadow:0px 0px 7px 0px rgba(80,183,140,0.43);
        border-radius:5px;
        transition: all .3s;
        margin: 10px 20px;
        font-size: 14px;
    }
    .IntelligentScreeningContentright_bg:hover {
        transform: scale(1.01);
    }
    .IntelligentScreeningContentright_job {
        font-size:14px;
        font-weight:400;
        color:rgba(70,70,70,1);
    }
    .IntelligentScreeningContentright_name {
        width:47px;
        height:16px;
        font-size:14px;
        font-weight:400;
        color:rgba(70,70,70,1);
        position: relative;
        top: 10px;
    }
    .IntelligentScreeningContentright_img {
        width: 41px;
        height: 35px;
        vertical-align: bottom;
    }
    .IntelligentScreeningContentCenterDetail_release {
        flex: 1;
        height:50px;
        background:linear-gradient(90deg,rgba(76,163,142,1),rgba(81,191,140,1));
        border-radius:5px;
        font-size:28px;
        font-weight:400;
        color:rgba(255,255,255,1);
        margin: 20px;
        border: 0;
        outline: 0;
        cursor: pointer;
        transition: all .3s;
        text-align: center;
    }
    .IntelligentScreeningContentCenterDetail_release:hover {
        transform: scale(1.01);
        box-shadow: 0px 2px 12px 0px green;
    }
    .standard p{
        line-height: 22px;
        padding-left: 20px;
        list-style-type: decimal;
    }
    .IntelligentScreening .el-breadcrumb__inner {
        color: #0a9759!important;
    }
    .level-item {
        color: #393939;
        font-size:14px;
        font-family:Microsoft YaHei UI;
        font-weight:400;
    }
    .IntelligentScreening h4:before {
        width: 4px;
        height: 24px;
        content: '';
        background: #55BD94;
        display: inline-block;
        position: relative;
        top: 6px;
        margin-right: 10px;
    }
    .IntelligentScreeningContentCenterBreakRules {
        padding: 18px 20px;
    }
    .IntelligentScreening .noReleasePersonImg{
        width: 250px;
        height: 206px;
        margin: 30px auto;
        background: url("../../static/img/csj/noReleasePerson.png");
    }
    .IntelligentScreening i:hover{
        cursor: pointer;
    }
    .IntelligentScreeningContentright .item_box {
      max-height: 550px;
      overflow-y: scroll;
    }
</style>
<style>
    .IntelligentScreening .el-breadcrumb__inner {
        color: #0a9759;
    }
    .IntelligentScreening  .el-card__body {
        padding: 0;
    }
    .IntelligentScreeningContentLeftTop_right_content::-webkit-scrollbar-thumb {
      background-color: #5EC79E!important;
    }
</style>
